<template>
	<div class="duration">
	    <el-form :model="searchData">
		    <el-form-item label="" class="form_date">
		        <el-date-picker v-model="searchData.time" @change="handleChange" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"  end-placeholder="结束日期">
		        </el-date-picker>
		    </el-form-item>
	    </el-form>
		<!-- 数据展示 -->
		<div>
			<span class="totalRevenue">时长总收益：<span class="revenue">{{totalRevenue}} 元</span></span>
		</div>
	    <el-table :data="tableData" style="width: 100%">
	      <el-table-column prop="orderId" label="订单号" align="center">
	      </el-table-column>
	      <el-table-column prop="userName" label="用户名" align="center">
	      </el-table-column>
	      <el-table-column prop="duration" label="充值时长" align="center">
	      </el-table-column>
	      <el-table-column prop="rechargeCost" label="充值金额（元）" align="center">
	      </el-table-column>
	      <el-table-column prop="mobilePhone" label="手机号码" align="center">
	      </el-table-column>
	      <el-table-column prop="ruleName" label="充值规则" align="center">
	      </el-table-column>
	      <el-table-column prop="rechargeTime" label="充值时间" align="center">
	      </el-table-column>

	      <!-- <el-table-column label="操作" align="center">
	        <template slot-scope="scope">
	          <el-button size="mini" type="primary" @click="seeOrder(scope.$index, scope.row)" v-permission='"9fbfde38914a41808e384061c013e22f"'>查看订单</el-button>
	        </template>
	      </el-table-column> -->
	    </el-table>

	    <!-- 分页 -->
	    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="tal" :hide-on-single-page="false" background :page-size="10" :page-sizes="[5,8,10]" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" style="margin-top:30px;">
	    </el-pagination>
	</div>
</template>

<script>
	import axios from 'axios'
	import qs from 'qs'

	export default {
		name:'duration',
		data(){
			return {
				searchData:{
          isLine:0
        },
				tableData:[],
				tal:null,
				currentPage:1,
				totalRevenue:0,
			}
		},
		mounted(){
			this.getTableData();
			this.getTotalRevenue();
		},
		methods: {
			getTotalRevenue(){
				axios({
					method: 'post',
					url: 'api/cRechargerecord/sumAmount',
					data: qs.stringify(this.searchData)
				}).then((res) => {
					this.totalRevenue = res.data.data;
				})
			},
			getTableData(){
				axios({
					method:'post',
					url:'api/cRechargerecord/selectRechargeRecordByManage',
					data:qs.stringify(this.searchData)
 				}).then((res) => {
 					this.tableData = res.data.data.list;
 					this.tal = res.data.data.total;
				})
			},
			//分页修改每页显示条数
      handleSizeChange(val){
        this.searchData.pageSize = val;
        this.getTableData();
      },
      //分页跳转页面
      handleCurrentChange(val){
        this.searchData.page = val;
        this.getTableData();
      },
      handleChange(e) {
        if (e != null){
          this.searchData.rechargeStart = e[0];
          this.searchData.rechargeEnd = e[1];
        } else {
          this.searchData.rechargeStart = '';
          this.searchData.rechargeEnd = '';
        }
        this.searchData.page = 1;
        this.getTableData();
        this.getTotalRevenue();
      }

		}
	}
</script>

<style scoped>
	.totalRevenue{
		/*display: inline-block;*/
		float: right;
		/*border:1px solid #1890ff;*/
		padding: 20px;
		font-weight: bolder;
		color: #1890ff;
		margin-right: 80px;
	}
	.revenue{
		color: #f40;
		font-size:20px;
		margin-left: 8px;
	}
  .form_date {
    display: inline-block;
    margin-right: 20px;
  }

</style>
